<template>
  <el-form :model="form_function_choice" label-width="80px">
    <el-form-item label="CVE编号">
      <el-input v-model="cve_number" @input="cve_check" placeholder="输入CVE编号进行过滤">
        <template #prepend>
          <el-button type="success" @click="cve_check">
            <el-icon style="vertical-align: middle">
              <Search/>
            </el-icon>
          </el-button>
        </template>
        <template #append>
          <el-button type="success" :loading="loading_issue_info" @click="get_issue_info('1')">重新加载</el-button>
        </template>
      </el-input>
    </el-form-item>
  </el-form>
  <div id="windowIssueShowContent" :style="{ height: (height - 60) + 'px' }" v-loading="loading_issue_info">
    <el-collapse v-model="activeNameCVEInfo" accordion>
    <el-collapse-item v-for="(v, k) in issue_info_search" :key="k" :title="'Issue标题：' + v.title" :name="v.id">
      <div v-html="v.body"></div>
    </el-collapse-item>
  </el-collapse>
  </div>

</template>

<script>
import axios from 'axios'
import {ElNotification} from 'element-plus'
import {Search} from '@element-plus/icons-vue'

export default {
  name: "windowIssueComponent",
  props: {
    sessionToken: String,
    codeName: String,
    accessToken: String,
    height: Number
  },
  components: {
    Search
  },
  data() {
    return {
      form_function_choice: {},
      activeNameCVEInfo: '1',
      loading_issue_info: false,
      issue_info: [],
      issue_info_search: [],
      cve_number: ""
    }
  },
  methods: {
    get_issue_info(page) {
      console.log("拉取issue，页面：", page)
      let obj_this = this
      if (page === '1') {
        obj_this.issue_info = []
        obj_this.issue_info_search = []
      }
      obj_this.loading_issue_info = true
      let url = "https://gitee.com/api/v5/repos/src-openeuler/" + this.codeName +
          "/issues?state=all&sort=created&direction=desc&page=" + page + "&per_page=100&access_token=" +
          this.accessToken
      axios.get(url).then(function (response) {
        obj_this.issue_info = obj_this.issue_info.concat(response.data)
        obj_this.issue_info_search = obj_this.issue_info_search.concat(response.data)
        obj_this.loading_issue_info = false
        if (parseInt(page) < parseInt(response.headers.total_page))
          obj_this.get_issue_info((parseInt(page) + 1).toString())
      }).catch(function (error) { // 请求失败处理
        console.log(error);
        ElNotification({
          title: "GiteeAPI请求失败",
          type: 'error',
        })
      });
    },
    cve_check() {
      if (this.cve_number === "") return
      this.issue_info_search = []
      for (const sessionIssueKey in this.issue_info) {
        // console.log(this.sessionIssue[sessionIssueKey].title.toString())
        if (this.issue_info[sessionIssueKey].title.indexOf(this.cve_number) !== -1) {
          let search_res_one = this.issue_info[sessionIssueKey]
          search_res_one.body = search_res_one.body
              .replace("BaseScore：", "<span style='color: red'>BaseScore：</span>")
              .replace("CVSS：", "<span style='color: red'>CVSS：</span>")
          this.issue_info_search.push(search_res_one)
        }
      }
      if (this.issue_info_search.length === 1) {
        this.activeNameCVEInfo = this.issue_info_search[0].id
      }
    },
  },
  mounted() {
    this.get_issue_info('1')
  }
}
</script>

<style scoped>
#windowIssueShowContent {
  height: 500px;
  overflow: auto;
}
</style>